<template>
  <view class="alldiv">
    <!-- 这个是头部筛选区域 -->
    <view class="topBox">
      <!-- 第一层搜索和返回 -->
      <view class="topdiv">
        <!-- 这个是返回区域 -->
        <view class="navdiv" @click="navigateBack">
          <u-icon name="arrow-left" size="35" color="rgba(0,0,0,0.9)"></u-icon>
        </view>
        <!-- 搜索区域 -->
        <view class="searchfordiv">
          <u-search
            shape="round"
            :placeholder="internationalization.Searchfor.searchval"
            :showAction="false"
            v-model="searchval"
          ></u-search>
        </view>
      </view>
      <!-- 这个是筛选区域 -->
      <view class="screendiv">
        <view class="s1">常用地址</view>
        <view class="s1">常用地址常用地址</view>
        <view class="s1">常用地址常用</view>
        <view class="s1">常用</view>
      </view>
      <!-- 这个是筛选区域 -->
      <view class="screendiv">
        <view class="s2"
          ><view
            class="r"
            style="background-color: rgba(47, 212, 184, 1)"
          ></view>
          <span
            style="
              margin-left: 10px;
              font-size: 12px;
              color: rgba(102, 102, 102, 1);
            "
            >{{ internationalization.Searchfor.cdz }}</span
          ></view
        >
        <view class="s2"
          ><view
            class="r"
            style="background-color: rgba(255, 141, 26, 1)"
          ></view
          ><span
            style="
              margin-left: 10px;
              font-size: 12px;
              color: rgba(102, 102, 102, 1);
            "
            >{{ internationalization.Searchfor.fwz }}</span
          ></view
        >
        <view class="s2"
          ><view class="r" style="background-color: rgba(255, 51, 51, 1)"></view
          ><span
            style="
              margin-left: 10px;
              font-size: 12px;
              color: rgba(102, 102, 102, 1);
            "
            >{{ internationalization.Searchfor.rb }}</span
          ></view
        >
      </view>
    </view>
    <!-- 主体区域 -->
    <view class="bodydiv">
      <!-- 这个是头部标题区域 -->
      <view class="headtitle">
        <u-cell-group>
          <u-cell :border="false" size="large">
            <view
              slot="title"
              style="
                font-size: 14px;
                font-weight: bold;
                color: rgba(56, 56, 56, 1);
              "
              >{{ internationalization.Searchfor.listtitle }}</view
            >
            <view slot="value" style="display: flex">
              <view
                style="
                  margin-left: 5px;
                  font-size: 12px;
                  color: rgba(153, 153, 153, 1);
                "
                >{{ internationalization.Searchfor.qk }}</view
              >
              <view
                style="
                  margin-left: 5px;
                  font-size: 12px;
                  color: rgba(153, 153, 153, 1);
                "
                >|</view
              >
              <view
                style="
                  margin-left: 5px;
                  font-size: 12px;
                  color: rgba(153, 153, 153, 1);
                "
                >{{ internationalization.Searchfor.gl }}</view
              >
            </view>
          </u-cell>
        </u-cell-group>
      </view>
      <!-- 这个是搜索是记录 -->
      <view class="Searchhistorydiv">
        <u-cell-group>
          <u-cell size="large" v-for="(item, i) in sslist" :key="i">
            <view slot="title" class="setwodiv">
              <view class="setdd">
                <image
                  style="width: 15px; height: 15px"
                  src="../../static/image/position.png"
                  mode="scaleToFill"
                />
              </view>
              <view class="valdiv">{{ item.val }}</view>
            </view>
          </u-cell>
        </u-cell-group>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      internationalization: {},
      // 搜索
      searchval: "",
      current: 0,
      list: [
        { name: "限时优惠" },
        { name: "免费停车" },
        { name: "品牌" },
        { name: "露天" },
      ],
      sslist: [
        {
          val: "历史记录地址",
        },
        {
          val: "历史记录地址历史记录地址历史记录地址历史记录地址历史",
        },
        {
          val: "历史记录地址历史记录地址历史记录地址历史记录地址历历史记录地址历史记录地址历史记录地址历史记录地址史",
        },
        {
          val: "历史记录地址",
        },
        {
          val: "历史记录地址历史记录地址历史记录地址历史记录地址历史",
        },
        {
          val: "历史记录地址历史记录地址历史记录地址历史记录地址历史",
        },
        {
          val: "历史记录地址历史记录地址历史记录地址历史记录地址历历史记录地址历史记录地址历史记录地址历史记录地址史",
        },
        {
          val: "历史记录地址",
        },
        {
          val: "历史记录地址历史记录地址历史记录地址历史记录地址历史",
        },
        {
          val: "历史记录地址历史记录地址历史记录地址历史记录地址历史",
        },
        {
          val: "历史记录地址历史记录地址历史记录地址历史记录地址历历史记录地址历史记录地址历史记录地址历史记录地址史",
        },
        {
          val: "历史记录地址",
        },
        {
          val: "历史记录地址历史记录地址历史记录地址历史记录地址历史",
        },
        {
          val: "历史记录地址历史记录地址历史记录地址历史记录地址历史",
        },
        {
          val: "历史记录地址历史记录地址历史记录地址历史记录地址历历史记录地址历史记录地址历史记录地址历史记录地址史",
        },
        {
          val: "历史记录地址",
        },
        {
          val: "历史记录地址历史记录地址历史记录地址历史记录地址历史",
        },
        {
          val: "历史记录地址历史记录地址历史记录地址历史记录地址历史",
        },
        {
          val: "历史记录地址历史记录地址历史记录地址历史记录地址历历史记录地址历史记录地址历史记录地址历史记录地址史",
        },
        {
          val: "历史记录地址",
        },
        {
          val: "历史记录地址历史记录地址历史记录地址历史记录地址历史",
        },
        {
          val: "历史记录地址历史记录地址历史记录地址历史记录地址历史",
        },
        {
          val: "历史记录地址历史记录地址历史记录地址历史记录地址历历史记录地址历史记录地址历史记录地址历史记录地址史",
        },
        {
          val: "历史记录地址",
        },
        {
          val: "历史记录地址历史记录地址历史记录地址历史记录地址历史",
        },
        {
          val: "历史记录地址历史记录地址历史记录地址历史记录地址历史",
        },
        {
          val: "历史记录地址历史记录地址历史记录地址历史记录地址历历史记录地址历史记录地址历史记录地址历史记录地址史",
        },
        {
          val: "历史记录地址",
        },
        {
          val: "历史记录地址历史记录地址历史记录地址历史记录地址历史",
        },
      ],
    };
  },
  onShow: function () {
    this.getlanguagedata();
    console.log("Personalcenter Show");
  },
  onLoad() {
    this.getlanguagedata();
  },
  mounted() {
    this.getlanguagedata();
  },
  methods: {
    getlanguagedata() {
      this.internationalization =
        this.$store.getters["internationalization/getinternationalization"];
    },
    // 返回上一个页面
    navigateBack() {
      uni.navigateBack({
        delta: 1,
        success: () => {
          // 返回成功后的回调函数
        },
        fail: () => {
          // 返回失败后的回调函数
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.alldiv {
  width: 100%;
  height: 100vh;

  .topBox {
    width: 100%;
    height: 25%;
    display: inline-block;
    content: "";
    background: url("@/static/icon/shop/topBj2.png") no-repeat center center;
    overflow: hidden;
    // 这个是搜索和返回样式
    .topdiv {
      width: 100%;
      height: 50%;
      display: flex;
      margin-bottom: 10px;
      // 这个是返回样式
      .navdiv {
        width: 15%;
        height: 100%;
        display: flex;
        justify-content: center;
        overflow: hidden;
      }
      // 这个是搜索样式
      .searchfordiv {
        width: 85%;
        height: 100%;
        display: flex;
      }
    }
    // 这个是筛选样式
    .screendiv {
      width: 100%;
      height: 25%;
      display: flex;
      align-items: center;
      // 这个是筛选的按钮
      .s1 {
        width: auto;
        height: 30px;
        align-items: center;
        display: flex;
        font-size: 12px;
        color: rgba(102, 102, 102, 1);
        border-radius: 4px;
        box-shadow: 0px 2px 4px rgba(5, 48, 7, 0.08);
        justify-content: center;
        margin-left: 20px;
        left: 22px;
        background: rgba(255, 255, 255, 1);
      }
      .s2 {
        width: auto;
        height: 30px;
        align-items: center;
        display: flex;
        font-size: 12px;
        box-shadow: 0px 2px 4px rgba(5, 48, 7, 0.08);
        justify-content: center;
        margin-left: 20px;
        .r {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          opacity: 1;
        }
      }
    }
  }
  //   主体样式
  .bodydiv {
    width: 100%;
    height: 75%;
    background-color: #ffffff;
    // 这个是头部
    .headtitle {
      width: 100%;
      height: 10%;
    }
    // 这个是搜索记录列表
    .Searchhistorydiv {
      width: 100%;
      height: 90%;
      overflow: auto;
      .setwodiv {
        width: 100% !important;
        height: 20% !important;
        display: flex;
        align-items: center;
        .setdd {
          width: 10%;
          height: 100%;
          display: flex;
          align-items: center;
        }
        .valdiv {
          width: 90%;
          height: 100%;
          font-size: 12px;
          color: rgba(102, 102, 102, 1);
        }
      }
    }
  }
}
</style>